<{include file="Business/business_top.html" }>
    </head>
    <body>
    	<div id="wrap">
			<div class="modal"></div>
    		<div class="select-box">

				<div class="ui-select">
					<div class="panel-title">
						<span>推荐</span>
						<i></i>
					</div>
					<ul class="panel" id="showOrder" val="1">
						<li value="1">推荐</li>
						<li value="2">就近</li>
					</ul>
				</div>

				<div class="ui-select">
					<div class="panel-title">
						<span>区域</span>
						<i></i>
					</div>
					<ul class="panel" id="district" val="0">
						<li value="0">全部</li>
						<{foreach from=$area key=id item=name}>
							<li value="<{$id}>"><{$name}></li>
						<{/foreach}>
					</ul>
				</div>

				<div class="ui-select">
					<div class="panel-title">
						<span>商圈</span>
						<i></i>
					</div>
					<ul class="panel" id="tradeArea" val="0">
						<li value="0">全部</li>
						<{foreach from=$tradeAreaKv key=id item=name}>
						<li value="<{$id}>"><{$name}></li>
						<{/foreach}>
					</ul>
				</div>

				<div class="ui-select">
					<div class="panel-title">
						<span>类型</span>
						<i></i>
					</div>
					<ul class="panel" id="type" val="0">
						<li value="0">全部</li>
						<{foreach from=$businessItem key=id item=name}>
						<li value="<{$id}>"><{$name}></li>
						<{/foreach}>
					</ul>
				</div>
    		</div>
    		
    		<ul class="recommend-list" id="dataContainer">
				<{include file="Business/index_list.html" }>
    		</ul>
			<{include file="footer.html"}>
    	</div>

    	<script>
			function calcDistance(){
				$('.location').each(
						function(i,item){
							if($(item).text()=='--'){
								var lat=$(item).attr('lat')*1.0;
								var lng=$(item).attr('lng')*1.0;
								var dis=distanceByLnglat(longitude,latitude,lng,lat);
								$(item).text(formatDistance(dis,'km')+'km');
							}
						}
				);
			}

			var loadMore = "<{U('Business/loadMore')}>";
			var page=1;
			function loadStore(){
				page=1;
				flagAjax = true;
				$('#dataContainer').empty();
				load_more({page:page});
			}

			//拖动加载
			var flagData = true;
			var flagAjax = true;
			//加载
			function load_more(postData){
				if(! flagAjax){
					return false;
				}
				flagAjax = false;
				postData.districtId=$('#district').attr('val');
				postData.tradeArea=$('#tradeArea').attr('val');
				postData.showOrder=$('#showOrder').attr('val');
				postData.type=$('#type').attr('val');
				postData.lng=longitude;
				postData.lat=latitude;

				$.getJSON(loadMore,postData , function(data){
					if (data.status != 0) {
						tip("数据获取失败，请稍后重试或联系管理员解决！");
					} else {
						++page;
						$("#dataContainer").append(data.dataHTML);
						if (data.isPage) flagAjax = true;

						if(true || latitude!=0 && longitude!=0){
							calcDistance();
						}
					}
				},'json');
			}

			var tmp_scroll = 0;
			//拖动加载
			function scroll_load(postData){
				if (tmp_scroll == $(window).height() + $(window).scrollTop()) {
					return;
				}
				tmp_scroll = $(window).height() + $(window).scrollTop();
				var jia_scroll = $(document).height() - ($(window).height() + $(window).scrollTop());
				if (jia_scroll < 100 && flagData) {
					load_more(postData);
				}
			}
			$(window).scroll(function(){
				if(page==1) page=2;
				scroll_load({page:page});
			});


			$(function(){
				$(".ui-select .panel-title").click(function(){
					var parentNode = $(this).parent();
					parentNode.toggleClass("show");
					parentNode.siblings().removeClass("show");
					if(parentNode.hasClass("show")){
						$(".modal").show();
					}else{
						$(".modal").hide();
					}
				})

				$(".panel li").click(function(event){selectLi(event)});
				$('.modal').click(function(){
					$('.ui-select').removeClass("show");
					$(".modal").hide();
				});



			})
			function selectLi(event){
				var $this=$(event.target);
				var val = $this.attr("value");
				var txt = $this.text();
				var selectNode = $this.parents(".ui-select");
				selectNode.find("span").text(txt);
				selectNode.removeClass("show");
				$(".modal").hide();

				var loc=$this.parent().attr('id');
				$('#'+loc).attr('val',val);
				switch (loc){
					case 'showOrder':
					case 'type':
					case 'tradeArea':
						loadStore();
						break;
					case 'district':
						$.post('./api.php?m=api&c=Business&a=getTradeAreaByDistrict',{id:val},function(res){
							var $tradearea=$('#tradeArea');
							$tradearea.empty().attr('val',0).append("<li value='0'>全部</li>");;
							if(res!=null) {
								$.each(res, function (k, v) {
									$tradearea.append("<li value='" + k + "'>" + v + "</li>");
								});
							}
							$tradearea.find(".panel li").click(function(event){selectLi(event)});
							$tradearea.prev().find("span").text("商圈");
							loadStore();
						});
						break;
				}
			}


    	</script>

	</body>
</html>
